Hello and welcome to this lecture.
In this show we are going to be Kree team.
The presentation style for their contact form.
We're going to use recess to make the form look prettier.
So this is how the form looks at the moment.
By the end of this lecture to look much more prettier than this okay.
Inside my projet folder in my text editor.
This is the thesis.
This is where we are right.
Ah he says again to save time rather than you watch me type.
The format will be that the code already written hi or placed in chunks at a time and then explain it
to you.
So we'd see says every note a tall style element in here says you need to know the property and then
the value.
So the body here is referred to as select top.
So does the item I am trying to apply styling to.
So with this is basically how you write this here's a syntax.
You start with a select and then curly braces.
That's the opening in the closing.
In between the calibrators is where you specify what you want to select to do.
I mean what style you want to apply to the selector.
Well same here.
I want the font family that is the text they use to be either some serif or aerial.
So when you are specifying font family it's always best to specify more then one when specifying the
font family you need to specify more than one.
Just in case the computer or device that has been used to view this page does not have.
Maybe your first choice.
So this is the first choice.
If they haven't got it all look for that they got that to look for that.
So most computers really do have one or two of these forms so you have very use safe to use these selection
because you are very likely to find most computers have them.
And then here have notice when I have specified the font family have separated each one with a comma
file now on the semicolon on your success.
Property most penned with a semicolon on the value for the property.
So again here I've defined another property which is a collar.
So I want the law here to be this.
This is an hecks value x rather than use the actual colour name I've use the hexadecimal value and this
is a good website that I go to as well.
Is God call or that Hextall gone.
Again you can see different columns so try and use your collars when you create in this form so that
it looks different and has your own impact on it so these are the heck scholars so always use them.
Or you can use the actual column names if you know what the names are.
Okay I posted are not a set of stylin here from like 5 to 12.
Always end your values for your property with a semicolon.
If not it will not work.
Very important.
Little things like this.
If you miss turn out it will not reflect in the stylin case so this is these diamine for the actual
form itself.
If I have set it to that the margin margin bizarre Glee is the distance from the outside distance.
Why pad padding is referred to the distance inside.
So when you take off margin think of outside padding is the space inside high margin refers to the space
outside.
When you set the margin to 0 2 0 2 means it all Centre the element on the page.
So notice I'm used to here.
I have also used 10 pixels.
When you set the margin usually set top right bottom left so this will add power applied to two values
and this will apply to two values.
When you use the how to remember the way the margin works or how you apply them.
Think of the word trouble and then take out the valves.
We tried the.
So you believe we t r b l which is top right bottom left.
That's how I remember.
Steps so stylish.
Okay so here I've given it padding 50 pixels these two values will cover all of them.
When you are specifying two values for a pardon normally what that does the one use.
This is kind of a short form way of doing it right and then specifying the four values to where you
specified two value the value will be applied to the top and the bottom and then the second value will
be applied to the right and the left.
Okay so Fair's value goes to the top and bottom.
Second value goes.
So right and left is the same process where the padding as well whereby you've got two values specify
it would be applied in that order.
Background for used hex value here.
This is black.
0 0 0 padding again from the bottom up or down and up from the bottom.
I want you want this space 0 want it to move to create a space of 55 pics for us to move hop but our
radios his WAP is around the corner.
So I've said this to 25 big.
Feel free to play around with these values so that you can see how it works.
I have said in some more stylin from line 14 to 19 this is this Whom are blind to the here.
Each one selector.
These are the properties the margin.
Set it at that note is of use of force values here.
Font size I've set it to that font size is a text size.
I have set the text to a line to the centre.
The colour is white.
This is the.
This means white in x.
Value
based as some more stylin from line 20 all the way to line 34.
The process is basically the same.
Once you can style one element the stylin is the same.
Again these are the selectors.
These are this thoroughly and apply to them.
If you are not sure what any of these mean Rican read them up or contact me would be more than happy
to explain the styling.
Basically the same for everything board.
Specify that I want there to be any border.
You've got a font size height padding or we've mentioned have mentioned before in the in the US style
so the process is exactly the same.
I did have a box shadow there but take in there house now just to keep it really simple.
I have pasted in the styling for the button which is a submit button.
So that's from line 34 to line 47 again.
The process has the same basic styling padding.
Call or text to line and so on is basically the same thing.
OK I've got more styling here from line 50 to 60.
This is fieldset and the label Phil said.
Here's what I want.
It's what housey is the content on the form like the label where you submit your name and stuff.
So that's what I'm giving it.
This is a label the actual name and these are the values properties and values that are attached to
that to that select.
Okay finally my last time limit is from line 61 all the way to 7 to 5.
This is where you see hash tag.
That means it's an I.D. So this.
Hi here.
This is refroze to the button the reset button.
So when you have the form if there's any data left that's this the reset button will clear the data.
So this is just the styling to make it look pretty.
Alright so again the process is the same the same type of stylin background call or text to line marjean
with.
You can always you can set to percentage or pixels when you said percentage it is relative to the container
that the selector is in.
So that is it for our stylin So let me just click on save to make sure all the work is saved in my brain
that always save your work.
Once you've done it for there are no issues.
So work.
Yes save.
And just refresh the contact form and we can see why.
So there you go.
So that is how it looks at the moment so you can see it looks a lot prettier than how it works.
So we have now applied styling to our Fawn necks lecture will be doing the Sears set the javascript
to implement the local story.
Thanks for watching.
Bye for now.
Let me know if you have any questions.
Bye.